<template>
  <Manage>
    <template #upCard>
      <el-form label-width="100px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="快递员账号">
              <el-input v-model="page.account" placeholder="请输入快递员账号" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="快递员姓名">
              <el-input v-model="page.name" placeholder="请输入快递员姓名" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="快递员手机号">
              <el-input v-model="page.phone" placeholder="请输入快递员手机号" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="所属机构">
              <Treeselect
                v-model="page.agentId"
                :options="tree"
                :normalizer="normalizer"
                placeholder="请输入所属机构"
                :append-to-body="true"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-button type="primary" size="" @click="search">搜索</el-button>
            <el-button @click="reset">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </template>
    <template #downCard>
      <el-table
        v-loading="loading"
        :data="courierData"
        stripe
        :header-cell-style="{background:'#f8faff',color:'#818693'}"
      >
        <el-table-column type="index" label="序号" />
        <el-table-column prop="account" label="快递员账号" />
        <el-table-column prop="name" label="快递员姓名" />
        <el-table-column prop="mobile" label="快递员手机号" />
        <el-table-column prop="agency" label="所属机构">
          <template #default="{row}">
            <span>{{ row.agency.name }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="isAvailable" label="工作状态">
          <template #default="{row}">
            <div :class="row.workStatus?'green-status':'red-status'">{{ row.workStatus?'上班':'下班' }}</div>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="200px">
          <template #default="{row}">
            <!-- <a href="javascript:void(0);" style="color:#419eff;">作业范围分配</a> -->
            <router-link
              style="color:#419eff;"
              :to="{path:'/branches/MapContent',
                    query:{agencyName:row.agency.name,id:row.userId,name:row.name},}"
            >作业范围分配</router-link>
          </template>
        </el-table-column>
      </el-table>
      <el-row type="flex" justify="center">
        <el-pagination
          :current-page="page.page"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="page.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="counts"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-row>
    </template>
  </Manage>
</template>

<script>
import { getOrgizationTree } from '@/api/ogization'
import { getCourier } from '@/api/employee'
export default {
  data() {
    return {
      page: {
        page: 1,
        pageSize: 10,
        account: null,
        name: null,
        phone: null,
        agentId: null
      },
      counts: 0,
      tree: [],
      courierData: [],
      loading: false
    }
  },
  created() {
    this.initTree()
    this.initCourierData()
  },
  methods: {
    // 下拉树结构
    async initTree() {
      const res = await getOrgizationTree()
      this.tree = JSON.parse(res)
    },
    // 快递员管理表格
    async initCourierData() {
      this.loading = true
      try {
        const res = await getCourier(this.page)
        // console.log(res)
        this.courierData = res.items
        this.counts = +res.counts
      } catch (error) {
        this.loading = false
      }
      this.loading = false
    },
    normalizer(node) {
      // 当子节点也就是children=[]时候去掉子节点
      if (node.children && !node.children.length) {
        delete node.children
      }
      return {
        id: node.id,
        label: node.name,
        children: node.children && node.children.length > 0 ? node.children : 0
      }
    },
    // 搜索
    search() {
      this.initCourierData()
    },
    // 分页
    handleSizeChange(val) {
      this.page.pageSize = val
      this.initCourierData()
    },
    handleCurrentChange(val) {
      this.page.page = val
      this.initCourierData()
    },
    reset() {
      this.page = {
        page: 1,
        pageSize: 10,
        account: null,
        name: null,
        phone: null,
        agentId: null
      }
      this.initCourierData()
    }
  }

}
</script>

<style lang="scss" scoped>
.green-status::before{
    content: "";
    width: 6px;
    height: 6px;
    background: #1dc779;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
}
.red-status::before{
    content: "";
    width: 6px;
    height: 6px;
    background: red;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
}
</style>
